<template>
  <div>
    <n-card title="" style="margin-bottom: 16px">
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row: ListData) => row.id"
        :actionColumn="actionColumn"
        :scroll-x="1090"
      >
        <template #tableTitle>
          <n-button type="primary" @click="handleOpenModal"> 新增 </n-button>
        </template>
      </BasicTable>
    </n-card>
    <div>
      <basicModal @register="modalRegister" ref="modalRef" class="basicModal">
        <p style="text-align: center">协议名称：隐私协议</p>
        <n-card :bordered="false" class="mt-4 proCard">
          <QuillEditor
            ref="quillEditor"
            :options="options"
            v-model:content="myContent"
            style="height: 350px"
            @ready="readyQuill"
            class="quillEditor"
          />
        </n-card>
      </basicModal>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  // import { getConsoleInfo } from '@/api/dashboard/console';
  import { getTableList } from '@/api/table/list';
  import { columns, ListData } from '@/views/setting/agreement/columns';
  import { useRouter } from 'vue-router';
  import { type FormRules } from 'naive-ui';
  import { QuillEditor } from '@vueup/vue-quill';
  import { basicModal, useModal } from '@/components/Modal';
  import '@vueup/vue-quill/dist/vue-quill.snow.css';

  type RowData = {
    name: string;
    age: number;
    address: string;
    key: number;
  };
  const checkedRowKeysRef = ref<Array<string | number>>([]);

  const router = useRouter();
  const formRef: any = ref(null);
  const actionRef = ref();
  const columnsRef = ref(columns);
  const showModal = ref(false);
  const formBtnLoading = ref(false);
  const value = ref(0);
  const formParams = reactive({
    name: '',
    address: '',
    date: null,
  });
  const quillEditor = ref();
  function resetForm() {
    formRef.value.restoreValidation();
    formValue = Object.assign(unref(formValue), defaultValueRef());
  }
  // 弹窗部分
  const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
    title: '编辑',
  });
  // 打开弹窗
  function handleOpenModal() {
    openModal();
  }

  const options = reactive({
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
        ['blockquote', 'code-block'],

        [{ header: 1 }, { header: 2 }], // custom button values
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
        [{ direction: 'rtl' }], // text direction

        [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
        [{ header: [1, 2, 3, 4, 5, 6, false] }],

        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        [{ font: [] }],
        [{ align: [] }],
        ['clean'],
        ['image'],
      ],
    },
    theme: 'snow',
    placeholder: '输入您喜欢的内容吧！',
  });
  function uploadChange(list: string[]) {}
  const actionColumn = reactive({
    width: 220,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render(record) {
      return h(TableAction as any, {
        style: 'text',
        actions: [
          {
            label: '编辑',
            // 根据业务控制是否显示 isShow 和 auth 是并且关系
            onClick: handleOpenModal.bind(null, record),
            ifShow: () => {
              return true;
            },
            // 根据权限控制是否显示: 有权限，会显示，支持多个
            auth: ['basic_list'],
          },
        ],
        select: (key) => {
          // window['$message'].info(`您点击了，${key} 按钮`);
        },
      });
    },
  });

  const [register, { getFieldsValue }] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 80,
  });

  function addTable() {
    showModal.value = true;
  }

  const loadDataTable = async (res) => {
    return await getTableList({ ...getFieldsValue(), ...res });
  };

  function reloadTable() {
    actionRef.value.reload();
  }

  const dataTableInstRef = ref(null);
</script>
<style scoped>

</style>
